<template>
  <!-- 互动记录 -->
  <div class="record-box">
    <div class="p-20">
      <div class="mini-title">互动记录</div>
      <hr class="hr-line">
      <div class="mt-20">
        <i class="icon icon-contact-wx"></i>  
        <i class="icon icon-contact-mobile"></i>  
        <i class="icon icon-contact-email"></i>  
      </div> 
      <div class="">
        <m-atstools></m-atstools>
      </div>
      <div class="resume-record">
        <div class="item" v-for="item in recordList">
          <i class="i-circle"></i>
          <div class="name">
            <span class="button-text">{{item.user}}</span>
            <template v-if="item.type=='watch'">
              浏览过
            </template>
            <template v-if="item.type=='sendMsg'">
              发送消息
            </template>
            <template v-if="item.type=='phone'">
              拨出电话
            </template>
          </div>
          <div class="time">{{item.time}}</div>
          <div class="detail" v-if="item.detail" :v-html="item.detal"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AtsTools from '@/components/common/components/atsTools'
  export default {
    components: {
      'm-atstools': AtsTools
    },
    data () {
      return {
        recordList: []
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        this.recordList = [
          {
            user: '我',
            type: 'sendMsg',
            time: '2018年7月16日下午5:07',
            detail: '刘先生您好，我们正在招聘【高级规划分析经理】一职，在人才库中看到了您的简历，觉得很合适，不知道是否方便跟您简单介绍一下？<br>如果方便的话，您可以回复这封邮件，告知我您的电话，或者微信号我会及时与您取得联系。'
          },
          {
            user: 'Leanne Li',
            type: 'phone',
            time: '2018年7月16日下午5:07',
          },
          {
            user: 'Leanne Li',
            type: 'phone',
            time: '2018年7月16日下午5:07',
          },
          {
            user: 'Leanne Li',
            type: 'watch',
            time: '2018年7月16日下午5:07',
          }
        ]
      }
    }
  }
</script>

<style lang="less">
  .resume-record{
    padding-left: 20px;
    margin-top: 30px;
    .item{
      position: relative;
      padding-bottom: 40px;
      .i-circle{
        display: block;
        width: 10px;
        height: 10px;
        background: #dadada;
        position: absolute;
        left: -25px;
        top: 5px;
        border-radius: 50%
      }
      .name{
        margin-bottom: 5px;
        color: #5e5e5e;
      }
    }
    .item:last-child{
      padding-bottom: 0;
    }
    .item:not(:last-child)::before{
      content: '';
      position: absolute;
      left: -20px;
      top: 10px;
      width: 1px;
      height: 100%;
      background: #dadada;

    }
  }

 
</style>
